<template>
  <div id="app">
      <div class="header">
        <Header></Header>
      </div>
    <div class="main" style="height: 1200px">
      <div class="bac" >
        <img style="width: 100%;" src="../assets/rant_bac.jpg" alt="">
      </div>
      <div class="Bread" style="margin-left: 200px;margin-top: 50px">
        <Breadcrumb>
          <Breadcrumb-item href="/"><Icon type="home"></Icon>首页</Breadcrumb-item>
          <Breadcrumb-item href=""> <router-link :to="{name:'Rent'}">网车租车实型图</router-link> </Breadcrumb-item>
          <hr style="height:1px;border:none;border-top:1px solid gray;margin-right: 200px;margin-top: 10px">
        </Breadcrumb>
      </div>

      <div class="car" style="width: 1150px;height: 1000px;margin: auto;margin-top: 25px;margin-left: 200px">
        <div class="car_content" style="width: 350px;height: 400px;float: left;margin-right: 33px">
          <img src="../assets/carList/car_1.jpg" style="width: 350px;height: 350px" alt="">
          <span style="margin-left: 130px;font-size: 20px"><router-link style="color: #1c2a3a" :to="{name:'Item'}">超级SUV</router-link></span>
        </div>
        <div class="car_content" style="width: 350px;height: 400px;float: left;margin-right: 33px">
          <img src="../assets/carList/car_2.jpg" style="width: 350px;height: 350px" alt="">
          <span style="margin-left: 130px;font-size: 20px"><router-link style="color: #1c2a3a" :to="{name:'Item'}">超级SUV</router-link></span>
        </div>
        <div class="car_content" style="width: 350px;height: 400px;float: left;margin-right: 33px">
          <img src="../assets/carList/car_3.jpg" style="width: 350px;height: 350px" alt="">
          <span style="margin-left: 130px;font-size: 20px"><router-link style="color: #1c2a3a" :to="{name:'Item'}">超级SUV</router-link></span>
        </div>
        <div class="car_content" style="width: 350px;height: 400px;float: left;margin-right: 33px">
          <img src="../assets/carList/car_1.jpg" style="width: 350px;height: 350px" alt="">
          <span style="margin-left: 130px;font-size: 20px">超级SUV</span>
        </div>
        <div class="car_content" style="width: 350px;height: 400px;float: left;margin-right: 33px">
          <img src="../assets/carList/car_2.jpg" style="width: 350px;height: 350px" alt="">
          <span style="margin-left: 130px;font-size: 20px">超级SUV</span>
        </div>
        <div class="car_content" style="width: 350px;height: 400px;float: left;margin-right: 33px">
          <img src="../assets/carList/car_3.jpg" style="width: 350px;height: 350px" alt="">
          <span style="margin-left: 130px;font-size: 20px">超级SUV</span>
        </div>
        <div style="">
          <Page style="margin: auto" :total="100"></Page>
        </div>
      </div>

    </div>
      <div class="footer">
        <Footer></Footer>
      </div>
  </div>
</template>

<script>
  import Header from "../components/Header";
  import Footer from "../components/Footer";

  export default {
    name: "Rent",
    components: {
      Header,
      Footer
    },
  }
</script>

<style scoped>
  .car_content img{
    cursor: pointer;
    transition: all 1.2s;/*图片放大过程的时间*/
  }
  .car_content img:hover{
    transform: scale(1.1);/*鼠标经过图片放大的倍数*/
  }
</style>
